<template>
  <div>
    <el-row :gutter="24" style="margin-bottom: 20px;">
      <el-col :xs="24" :md="12" :lg="8" v-if="userStatistics">
        <el-card class="box-card" shadow="hover">
          <div class="clearfix">
            <span>用户统计</span>
            <el-button
              @click.prevent="initUserStatisticsData"
              style="float: right; padding: 3px 20px"
              type="text"
            >刷新</el-button>
          </div>
          <div
            v-for="(userStatistics, index) in userStatisticsData"
            :key="index"
            class="cell-div"
            @click="openTab(userStatistics.routerPath)"
          >
            {{userStatistics.title}}
            <div style="float: right;">
              <el-tag
                :color="userStatistics.color"
                style="color: #fff;"
              >{{userStatistics.count || 0}}</el-tag>
              <i v-if="userStatistics.routerPath" class="el-icon-arrow-right" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12" :lg="8" v-if="mallStatistics">
        <el-card class="box-card" shadow="hover">
          <div class="clearfix">
            <span>商城统计</span>
            <el-button
              @click.prevent="initMallStatisticsData"
              style="float: right; padding: 3px 20px"
              type="text"
            >刷新</el-button>
          </div>
          <div
            v-for="(mallStatistics, index) in mallStatisticsData"
            :key="index"
            class="cell-div"
            @click="openTab(mallStatistics.routerPath)"
          >
            {{mallStatistics.title}}
            <div style="float: right;">
              <el-tag
                :color="mallStatistics.color"
                style="color: #fff;"
              >{{mallStatistics.count || 0}}</el-tag>
              <i v-if="mallStatistics.routerPath" class="el-icon-arrow-right" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12" :lg="8" v-if="accountStatistics">
        <el-card class="box-card" shadow="hover">
          <div class="clearfix">
            <span>账目统计</span>
            <el-button
              @click.prevent="initAccountStatisticsData"
              style="float: right; padding: 3px 20px"
              type="text"
            >刷新</el-button>
          </div>
          <div
            v-for="(accountStatistics, index) in accountStatisticsData"
            :key="index"
            class="cell-div"
            @click="openTab(accountStatistics.routerPath)"
          >
            {{accountStatistics.title}}
            <div style="float: right;">
              <el-tag
                :color="accountStatistics.color"
                style="color: #fff;"
              >{{accountStatistics.count || 0}}</el-tag>
              <i v-if="accountStatistics.routerPath" class="el-icon-arrow-right" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-bottom: 20px;" v-if="activitiTasks">
      <el-col :xs="24" :md="12" :lg="8">
        <el-card>
          <div class="clearfix">
            <span>指派人任务-({{assigneeCount}})</span>
            <el-button
              @click.prevent="showTaskDetail(0)"
              style="float: right; padding: 3px 0"
              type="text"
            >更多</el-button>
          </div>
          <div class="no-data" v-if="assigneeDataShow">
            暂无任务
          </div>
          <ul style="list-style-type:none" v-if="!assigneeDataShow">
            <el-tooltip content="点击查看详情">
              <li v-for="(item,index) in assigneeTaskList" :key="index">
                <a href="javascript:;" @click="showTaskDetail(0)">{{ item.name }}</a>
              </li>
            </el-tooltip>
          </ul>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12" :lg="8">
        <el-card>
          <div class="clearfix">
            <span>候选人任务-({{candidateCount}})</span>
            <el-button
              @click.prevent="showTaskDetail(1)"
              style="float: right; padding: 3px 0"
              type="text"
            >更多</el-button>
          </div>
          <div class="no-data" v-if="assigneeDataShow">
            暂无任务
          </div>
          <ul style="list-style-type:none" v-if="!candidateDataShow">
            <el-tooltip content="点击查看详情">
              <li v-for="(item,index) in candidateTaskList" :key="index">
                <a href="javascript:;" @click="showTaskDetail(1)">{{ item.name }}</a>
              </li>
            </el-tooltip>
          </ul>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12" :lg="8">
        <el-card>
          <div class="clearfix">
            <span>候选组任务-({{groupCount}})</span>
            <el-button
              @click.prevent="showTaskDetail(2)"
              style="float: right; padding: 3px 0"
              type="text"
            >更多</el-button>
          </div>
          <div class="no-data" v-if="assigneeDataShow">
            暂无任务
          </div>
          <ul style="list-style-type:none; margin-top: 10px;" v-if="!groupDataShow">
            <el-tooltip content="点击查看详情">
              <li v-for="(item,index) in groupTaskList" :key="index">
                <a href="javascript:;" @click="showTaskDetail(1)">{{ item.name }}</a>
              </li>
            </el-tooltip>
          </ul>
        </el-card>
      </el-col>
    </el-row>
    <DauEcharts :visible.sync="userEcharts" />
    <OrderEcharts :visible.sync="orderEcharts" />
    <AccountEcharts :visible.sync="accountEcharts" />
    <PayTypeEcharts :visible.sync="payTypeEcharts" />
  </div>
</template>

<script>
import { getDate, doPostJson, doPostQs } from '@/utils/utils'
import DauEcharts from '@/components/Charts/DauEcharts.vue'
import OrderEcharts from '@/components/Charts/OrderEcharts.vue'
import AccountEcharts from '@/components/Charts/AccountEcharts.vue'
import PayTypeEcharts from '@/components/Charts/PayTypeEcharts.vue'
import * as ResponseStatus from '@/utils/response-status'
import { homePageConfig } from '@/settings'

export default {
  name: 'DashboardAdmin',
  components: {
    DauEcharts,
    AccountEcharts,
    PayTypeEcharts,
    OrderEcharts,
  },
  data() {
    return {
      userStatistics: homePageConfig.userStatistics,
      mallStatistics: homePageConfig.mallStatistics,
      accountStatistics: homePageConfig.accountStatistics,
      activitiTasks: homePageConfig.activitiTasks,
      userEcharts: homePageConfig.userEcharts,
      orderEcharts: homePageConfig.orderEcharts,
      accountEcharts: homePageConfig.accountEcharts,
      payTypeEcharts: homePageConfig.payTypeEcharts,
      userStatisticsLoading: true,
      mallStatisticsLoading: true,
      accountStatisticsLoading: true,
      userStatisticsData: [
        {
          title: '总用户数',
          icon: 'el-icon-user-solid',
          count: 0,
          color: '#2d8cf0',
        },
        {
          title: '昨日新增',
          count: 0,
          color: '#ff9900',
          routerPath: '/data-report/dau-report',
        },
        {
          title: '今日新增',
          count: 0,
          color: '#ed3f14',
          routerPath: '/data-report/dau-report',
        },
        {
          title: '一周新增',
          count: 0,
          color: '#E46CBB',
        },
        { title: '一周活跃', icon: 'md-map', count: 0, color: '#9A66E4' },
      ],
      mallStatisticsData: [
        { title: '总商品数', icon: 'ios-cart', count: 0, color: '#2d8cf0' },
        { title: '总上架商品数', icon: 'md-grid', count: 0, color: '#ff9900' },
        {
          title: '总商品SKU数',
          count: 0,
          color: '#ed3f14',
        },
        {
          title: '总订单数',
          count: 0,
          color: '#E46CBB',
          routerPath: '/data-report/order-report',
        },
        {
          title: '待付款订单数',
          count: 0,
          color: '#9A66E4',
        },
        {
          title: '待发货订单数',
          count: 0,
          color: '#187',
        },
      ],
      accountStatisticsData: [
        {
          title: '平台总结余',
          count: 0,
          color: '#2d8cf0',
          routerPath: '/data-report/account-report',
        },
        {
          title: '平台总入账',
          count: 0,
          color: '#ff9900',
        },
        { title: '平台总出账', count: 0, color: '#ed3f14' },
        { title: '商城总发放佣金', count: 0, color: '#E46CBB' },
      ],
      taskUrls: {
        assigneeTasksUrl: '/process-activiti/admin/query/assignee-tasks',
        candidateTasksUrl: '/process-activiti/admin/query/candidate-tasks',
        groupTasksUrl: '/process-activiti/admin/query/group-tasks',
      },
      taskParamForm: {
        pageNo: 1,
        pageSize: 3,
      },
      assigneeDataShow: true,
      assigneeCount: 0,
      assigneeTaskList: [],
      candidateDataShow: true,
      candidateCount: 0,
      candidateTaskList: [],
      groupDataShow: true,
      groupCount: 0,
      groupTaskList: [],
    }
  },
  mounted() {
    if (this.userStatistics) {
      this.initUserStatisticsData()
    }
    if (this.mallStatistics) {
      this.initMallStatisticsData()
    }
    if (this.accountStatistics) {
      this.initAccountStatisticsData()
    }
    // if (this.activitiTasks) {
    //   this.loadTasks()
    // }
  },
  methods: {
    // 初始化跳动的数字数据，从后台取
    initUserStatisticsData() {
      var currDate = new Date()
      this.userStatisticsLoading = true
      // 取注册数据
      doPostQs('/user-liveness-stat/reg-count', {}, {})
        .then((res) => {
          this.userStatisticsLoading = false
          const data = res
          this.userStatisticsData[0].count = data.data[0]
          if (data.data[1].length) {
            this.userStatisticsData[1].count = data.data[1][0].totalLongCount
            this.userStatisticsData[2].count = data.data[1][1].totalLongCount
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
      // 本周开始时间
      const beginDate = getDate(currDate, -6)
      // 本周结束时间
      const endDate = getDate(currDate, 0)
      const weekParams = {
        beginDateStr: beginDate,
        endDateStr: endDate,
      }
      // 取本周总新增用户数
      doPostQs('/user-liveness-stat/reg-all-count-by-date', weekParams, {})
        .then((res) => {
          const data = res
          this.userStatisticsData[3].count = data.data === null ? 0 : data.data
        })
        .catch((err) => {
          this.$message.error(err)
        })
      // 取本周总活跃用户数
      doPostQs('/user-liveness-stat/all-dau', weekParams, {})
        .then((res) => {
          const data = res
          this.userStatisticsData[4].count = data.data === null ? 0 : data.data
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    initMallStatisticsData() {
      this.mallStatisticsLoading = true
      doPostJson('/mall-stat/goods-order-count', {}, {})
        .then((response) => {
          this.mallStatisticsLoading = false
          const theCount = response.data
          for (let i = 0; i < 6; i++) {
            this.mallStatisticsData[i].count = theCount[i]
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    initAccountStatisticsData() {
      this.accountStatisticsLoading = true
      doPostJson('/account-stat/account-count', {}, {})
        .then((response) => {
          this.accountStatisticsLoading = false
          const theCount = response.data
          for (let i = 0; i < 4; i++) {
            this.accountStatisticsData[i].count = theCount[i]
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    openTab(routerPath) {
      if (routerPath) {
        this.$router.push(routerPath)
      }
    },
    // loadTasks() {
    //   // 取指派人任务
    //   this.assigneeDataShow = true
    //   searchWaitTask(this, this.taskUrls.assigneeTasksUrl)
    //     .then(res => {
    //       const data = res.data
    //       if (data.code !== ResponseStatus.OK) {
    //         self.$message.error(res.data.message)
    //         return
    //       }
    //       this.assigneeCount = data.data.total
    //       if (data.data.total === 0) {
    //         this.assigneeDataShow = true
    //       } else {
    //         this.assigneeDataShow = false
    //         this.assigneeTaskList = data.data.rows
    //       }
    //     })
    //     .catch(err => {
    //       this.$message.error(err)
    //     })
    //   // 取候选人任务
    //   this.candidateDataShow = true
    //   searchWaitTask(this, this.taskUrls.candidateTasksUrl)
    //     .then(res => {
    //       const data = res.data
    //       if (data.code !== ResponseStatus.OK) {
    //         self.$message.error(res.data.message)
    //         return
    //       }
    //       this.candidateCount = data.data.total
    //       if (data.data.total === 0) {
    //         this.candidateDataShow = true
    //       } else {
    //         this.candidateDataShow = false
    //         this.candidateTaskList = data.data.rows
    //       }
    //     })
    //     .catch(err => {
    //       this.$message.error(err)
    //     })
    //   // 取候选组任务
    //   this.groupDataShow = true
    //   searchWaitTask(this, this.taskUrls.groupTasksUrl)
    //     .then(res => {
    //       const data = res.data
    //       if (data.code !== ResponseStatus.OK) {
    //         self.$message.error(res.data.message)
    //         return
    //       }
    //       this.groupCount = data.data.total
    //       if (data.data.total === 0) {
    //         this.groupDataShow = true
    //       } else {
    //         this.groupDataShow = false
    //         this.groupTaskList = data.data.rows
    //       }
    //     })
    //     .catch(err => {
    //       this.$message.error(err)
    //     })
    // },
    showTaskDetail(type) {
      this.$router.push({
        name: 'activiti_tasks',
        params: {
          type: type,
        },
      })
    },
  },
}
</script>

<style lang="scss">
.cell-div {
  width: 100%;
  height: 35px;
  line-height: 35px;
  padding: 0 20px;
}

.cell-div:hover {
  background-color: #f3f3f3;
  cursor: pointer;
}

.no-data {
  padding-top: 10px;
  text-align: center;
  color: #515a6e;
}
</style>
